<template>
  <div class="container coupon">
    <!-- <van-nav-bar
      title="账单列表"
      left-text="返回"
      left-arrow
      @click-left="onClickLeft"
    /> -->
    <!-- <div class="van-hairline--top">
      <van-field
        placeholder="请选择月份"
        v-model="PayDate"
        label="账单季度："
        readonly
        @click="isShowSelectTime = true"
        clearable
        class="pay-date"
      />
    </div> -->
        <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
          <div class="coupon-list-row">
            <van-list
              v-model="loading"
              :finished="finished"
              finished-text="没有更多数据了"
              :error.sync="error"
              error-text="请求失败，点击重新加载"
              @load="getMyCoupon"
            >
              <div class="bill-list van-hairline--top" v-for="(item,index) in couponList" :key="index">
                <div style="color:#999;">
                  <span class="red-dot" v-if="!item.IsPay"></span>
                  <span>{{item.TypeStr}}</span>
                  <span style="margin-left:20px;">{{item.PayDate}}</span>
                  <span style="float:right;">
                    <span class="is-pay" style="color:#999" v-if="item.IsPay">已支付</span>
                    <span class="is-pay" style="color:#ff976a" v-else>待支付</span>
                  </span>
                </div>
                <!-- <div class="flex bill-money">
                  <div class="flex-1">{{item.TotalFee}}元</div>
                  <div class="is-pay" style="color:#999" v-if="item.IsPay">已支付</div>
                  <div class="is-pay" v-else>待支付</div>
                </div> -->
                <div class="flex bill-area align-center">
                  <div class="flex-1">
                    <span>单价：{{item.UnitPrice}}</span>
                    <span>面积：{{item.Area}}</span>
                    <span style="margin-right:0;">总价：<b style="color:rgb(255, 151, 106);font-size:.4rem;font-weight:normal">{{item.TotalFee}}</b></span>
                  </div>
                  <div style="float:right;font-size:0.32rem;width:2rem;" class="is-pay">{{item.LastDateStr}}</div>
                </div>
                <div class="bill-remarks">
                  {{item.Remarks}}
                </div>
              </div>
            </van-list>
          </div>
        </van-pull-refresh>
        <van-popup v-model="isShowSelectTime" label="出生日期" position="bottom" :overlay="true">
          <van-datetime-picker
            v-model="currentDate"
            type="year-month"
            @cancel="isShowSelectTime = false"
            @confirm="confirmDate"
            :formatter="formatter"
            @change="dateChange"
            :max-date="maxDate"
          />
        </van-popup>
    
  </div>
</template>

<script>
//import { msToDate } from '@/until/until';
export default {
  name: 'shopBill',
  data() {
    return {
      isLoading: false,
      loading: false,
      finished: false,
      error: false,
      couponList:[],
      currentDate: new Date(),
      isShowSelectTime:false,
      pageIndex:0,
      pageSize:10,
      PayDate:'',
      curentDate:'',
      changePayDate:'',
      maxDate: new Date(),
    };
  },
  mounted() {
    let myDate = new Date();
    let tYear = myDate.getFullYear();
    let tMonth = myDate.getMonth() +1;
    if(tMonth<10){
      tMonth = '0'+tMonth
    }
    this.curentDate = tYear+'-'+tMonth

  },
  methods: {
     onClickLeft() {
      this.$router.go(-1);
    },
    formatter(type, value) {
      if (type === 'year') {
        return `${value}`;
      } else if (type === 'month') {
        return `${value}`
      }
      return value;
    },
    confirmDate(){
      this.PayDate = this.changePayDate || this.curentDate;
      this.isShowSelectTime = false
      this.pageIndex = 0;
      this.getMyCoupon();
    },
    dateChange(e){
      let endTimeArr = e.getValues();
      this.changePayDate = `${endTimeArr[0]}-${endTimeArr[1]}`
    },
    onRefresh() {
      setTimeout(() => {
        this.pageIndex = 0;
        this.getMyCoupon();
        this.$toast('刷新成功');
        this.isLoading = false;
        this.finished = false;
      }, 500);
    },
    getMyCoupon(){
      this.$api.mine.getShopBill({   
          PageIndex:++this.pageIndex,
          PageSize:this.pageSize,
          //Type:'',
          PayDate:this.PayDate
      }).then(res=> {
        this.loading = false;
        let data = res.Data;
        if(data.PageIndex==1){
          this.couponList = data.Data;
        }else{
          this.couponList = this.couponList.concat(data.Data);
        }
        if (this.couponList.length >= data.TotalNum) {
          this.finished = true;
        }
      }).catch(() => {
        this.error = true;
      })   
    },
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">

.coupon {
  height: auto;
  .bill-list{
    font-size: 14px;
    padding: .266667rem;
    background-color: #fff;
    position: relative;

    .red-dot {
      display: inline-block;
      width: 0.16rem;
      height: 0.16rem;
      border-radius: 50%;
      background-color: red;
      position: absolute;
      right: 0.1rem;
      top: 0.1rem;
    }
  }
  .bill-money{
    color: #ff976a;
    font-size: 16px;
  }
  .is-pay{
    text-align: right;
    font-size: .373333rem;
    margin-right: 0!important;
  }
  .bill-date{
    margin-top: .133333rem;
    color: #999;
    font-size: .32rem
  }
  .bill-area{
    font-size: 12px;
    color: #999;
    margin-top: .133333rem;
    span{
      margin-right: .32rem;
      display: inline-block;
    }
  }
  .bill-remarks{
    font-size: 12px;
    color: #999;
    margin-top: .133333rem;
  }
  
}
</style>